<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>汽车销售管理系统登录</title>
    <meta name="description" content="汽车销售进销存管理系统">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.8.1}" rel="stylesheet"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
    <style>
        /* 重置和基础样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body.signin {
            font-family: 'Microsoft YaHei', sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
            background-size: cover;
            color: #333;
            overflow: hidden;
            position: relative;
        }

        /* 动态汽车背景 - 改为超跑图片 */
        .car-slideshow {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .car-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            background-size: cover;
            background-position: center;
            animation: carFade 16s infinite;
        }

        .car-slide:nth-child(1) {
            background-image: url('https://pic.rmb.bdstatic.com/bjh/news/b3c6f5cb93c5c5812c0c252e5fcade7f.jpeg@q_90');
            animation-delay: 0s;
        }

        .car-slide:nth-child(2) {
            background-image: url('https://p6.itc.cn/q_70/images03/20220628/5a9c00830a4543f1bdc4f49c99d46f6d.jpeg');
            animation-delay: 4s;
        }

        .car-slide:nth-child(3) {
            background-image: url('https://q3.itc.cn/q_70/images01/20241030/c1fcce7f6a8045888e91737a0f05ad37.jpeg');
            animation-delay: 8s;
        }

        .car-slide:nth-child(4) {
            background-image: url('https://img12.iqilu.com/10361/sucaiku/compress/202402/23/3f8d48d894604f6eb403e338b583fb33.png');
            animation-delay: 12s;
        }

        @keyframes carFade {
            0% { opacity: 0; }
            10% { opacity: 1; }
            25% { opacity: 1; }
            35% { opacity: 0; }
            100% { opacity: 0; }
        }

        /* 动态光效 */
        .light-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to right,
                rgba(255,255,255,0.1) 0%,
                rgba(255,255,255,0) 30%,
                rgba(255,255,255,0) 70%,
                rgba(255,255,255,0.1) 100%
            );
            animation: lightSweep 8s infinite;
            z-index: -1;
        }

        @keyframes lightSweep {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* 登录按钮样式 */
        .login-trigger-btn {
            position: relative;
            z-index: 10;
            padding: 16px 40px;
            background: linear-gradient(135deg, #2989d8 0%, #1e5799 100%);
            border: none;
            color: white;
            border-radius: 50px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
            overflow: hidden;
        }

        .login-trigger-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        }

        .login-trigger-btn:after {
            content: "";
            position: absolute;
            top: -50%;
            left: -60%;
            width: 20px;
            height: 200%;
            background: rgba(255,255,255,0.2);
            transform: rotate(30deg);
            transition: all 0.3s;
        }

        .login-trigger-btn:hover:after {
            left: 120%;
        }

        /* 登录面板容器 - 初始隐藏 */
        .signin-container {
            width: 90%;
            max-width: 800px; /* 缩小最大宽度 */
            min-height: 400px; /* 缩小最小高度 */
            display: flex;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            z-index: 100;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 更平滑的动画曲线 */
            opacity: 0;
            visibility: hidden;
            animation: pulse 2s infinite; /* 添加呼吸灯效果 */
        }

        /* 呼吸灯动画 */
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(41, 137, 216, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(41, 137, 216, 0); }
            100% { box-shadow: 0 0 0 0 rgba(41, 137, 216, 0); }
        }

        /* 登录面板显示状态 */
        .signin-container.show {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
            animation: none; /* 显示时取消呼吸灯效果 */
        }

        /* 关闭按钮 */
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 101;
            transition: all 0.3s;
        }

        .close-btn:hover {
            background: rgba(255, 255, 255, 0.5);
            transform: rotate(90deg);
        }

        .close-btn:before, .close-btn:after {
            content: '';
            position: absolute;
            width: 60%;
            height: 2px;
            background: #333;
        }

        .close-btn:before {
            transform: rotate(45deg);
        }

        .close-btn:after {
            transform: rotate(-45deg);
        }

        /* 左侧信息区域 */
        .signin-info {
            flex: 1;
            padding: 30px; /* 减少内边距 */
            background: linear-gradient(135deg, rgba(41, 137, 216, 0.7) 0%, rgba(30, 87, 153, 0.7) 100%);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(5px);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            transform: translateX(-20px); /* 初始偏移 */
            opacity: 0; /* 初始透明 */
            transition: all 0.5s ease-out 0.2s; /* 延迟动画 */
        }

        .signin-container.show .signin-info {
            transform: translateX(0);
            opacity: 1;
        }

        .signin-info:before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(255,255,255,0.1) 0%,
                rgba(255,255,255,0) 60%
            );
            transform: rotate(30deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% { transform: translateX(-100%) rotate(30deg); }
            100% { transform: translateX(100%) rotate(30deg); }
        }

        /* 右侧表单区域 */
        .signin-form {
            flex: 1;
            padding: 30px; /* 减少内边距 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(5px);
            transform: translateX(20px); /* 初始偏移 */
            opacity: 0; /* 初始透明 */
            transition: all 0.5s ease-out 0.3s; /* 延迟动画 */
        }

        .signin-container.show .signin-form {
            transform: translateX(0);
            opacity: 1;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .signin-container {
                flex-direction: column;
                max-width: 90%;
                min-height: auto;
            }

            .signin-info, .signin-form {
                padding: 20px;
            }

            .signin-info {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                transform: translateY(-20px);
            }

            .signin-form {
                transform: translateY(20px);
            }

            .signin-container.show .signin-info,
            .signin-container.show .signin-form {
                transform: translateY(0);
            }
        }

        /* 品牌标志 */
        .logopanel {
            text-align: center;
            margin-bottom: 20px; /* 减少外边距 */
        }

        .logopanel img {
            height: 50px; /* 缩小logo */
            transition: all 0.3s ease;
            filter: drop-shadow(0 0 10px rgba(0,0,0,0.2));
        }

        .logopanel img:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
        }

        /* 欢迎信息 */
        .welcome-message {
            margin-bottom: 20px; /* 减少外边距 */
            text-align: center;
        }

        .welcome-message h4 {
            font-size: 22px; /* 缩小字体 */
            margin-bottom: 10px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        /* 特性列表 */
        .features-list {
            list-style: none;
            margin-bottom: 20px; /* 减少外边距 */
        }

        .features-list li {
            margin-bottom: 10px; /* 减少外边距 */
            padding-left: 25px; /* 减少内边距 */
            position: relative;
            transition: all 0.3s ease;
            font-size: 14px; /* 缩小字体 */
        }

        .features-list li:hover {
            transform: translateX(5px); /* 减少悬停移动距离 */
        }

        .features-list li i {
            position: absolute;
            left: 0;
            top: 2px;
            color: rgba(255,255,255,0.8);
            font-size: 16px; /* 缩小图标 */
        }

        /* 表单样式 */
        .form-header {
            margin-bottom: 20px; /* 减少外边距 */
            text-align: center;
        }

        .form-header h4 {
            font-size: 22px; /* 缩小字体 */
            margin-bottom: 10px;
            color: #2989d8;
        }

        .form-header p {
            color: #666;
            font-size: 13px; /* 缩小字体 */
        }

        /* 表单输入框 */
        .form-group {
            margin-bottom: 20px; /* 减少外边距 */
            position: relative;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px; /* 减少内边距 */
            border: 1px solid rgba(221, 221, 221, 0.5);
            border-radius: 4px;
            font-size: 14px; /* 缩小字体 */
            transition: all 0.3s;
            background: rgba(255, 255, 255, 0.9);
        }

        .form-control:focus {
            border-color: rgba(41, 137, 216, 0.8);
            box-shadow: 0 0 0 3px rgba(41, 137, 216, 0.2);
            background: white;
        }

        /* 验证码区域 */
        .captcha-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px; /* 减少外边距 */
        }

        .captcha-input {
            flex: 1;
            margin-right: 10px;
        }

        .captcha-image {
            height: 40px; /* 缩小高度 */
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .captcha-image:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        /* 记住我选项 */
        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 20px; /* 减少外边距 */
        }

        .remember-me input {
            margin-right: 10px;
        }

        /* 登录按钮 */
        .login-btn {
            width: 100%;
            padding: 12px; /* 减少内边距 */
            background: linear-gradient(135deg, #2989d8 0%, #1e5799 100%);
            border: none;
            color: white;
            border-radius: 4px;
            font-size: 15px; /* 缩小字体 */
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(41, 137, 216, 0.4);
            font-weight: bold;
            letter-spacing: 1px;
        }

        .login-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(41, 137, 216, 0.6);
        }

        .login-btn:active {
            transform: translateY(0);
        }

        .login-btn:after {
            content: "";
            position: absolute;
            top: -50%;
            left: -60%;
            width: 20px;
            height: 200%;
            background: rgba(255,255,255,0.2);
            transform: rotate(30deg);
            transition: all 0.3s;
        }

        .login-btn:hover:after {
            left: 120%;
        }

        /* 注册链接 */
        .register-link {
            text-align: center;
            margin-top: 20px; /* 减少外边距 */
        }

        .register-link a {
            color: #fff;
            text-decoration: none;
            transition: all 0.3s;
            position: relative;
            font-weight: bold;
        }

        .register-link a:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: white;
            transition: width 0.3s;
        }

        .register-link a:hover:after {
            width: 100%;
        }

        /* 页脚 */
        .signup-footer {
            text-align: center;
            margin-top: 20px; /* 减少外边距 */
            color: #666;
            font-size: 11px; /* 缩小字体 */
        }

        /* 时间显示 */
        .time-container {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.9);
            padding: 10px 15px; /* 减少内边距 */
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
            z-index: 10;
            transition: all 0.3s;
            border: 1px solid #eee;
        }

        .time-container:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            background: white;
        }

        .time-container .time {
            font-size: 22px; /* 缩小字体 */
            font-weight: bold;
            color: #2989d8;
        }

        .time-container .date {
            font-size: 13px; /* 缩小字体 */
            color: #666;
            margin-top: 5px;
        }

        /* 浮动元素动画 */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .floating {
            animation: float 3s ease-in-out infinite;
        }

        /* 汽车图标动画 */
        .car-icon {
            position: absolute;
            font-size: 30px;
            color: rgba(255,255,255,0.7);
            animation: drive 15s linear infinite;
            z-index: -1;
        }

        @keyframes drive {
            0% { transform: translateX(-100px) rotateY(0deg); }
            50% { transform: translateX(calc(100vw + 100px)) rotateY(0deg); }
            51% { transform: translateX(calc(100vw + 100px)) rotateY(180deg); }
            100% { transform: translateX(-100px) rotateY(180deg); }
        }

        /* 遮罩层 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .overlay.show {
            opacity: 1;
            visibility: visible;
        }
    </style>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>
</head>
<body class="signin">
<!-- 动态汽车背景轮播 -->
<div class="car-slideshow">
    <div class="car-slide"></div>
    <div class="car-slide"></div>
    <div class="car-slide"></div>
    <div class="car-slide"></div>
</div>

<!-- 动态光效 -->
<div class="light-effect"></div>

<!-- 时间显示 -->
<div class="time-container floating">
    <div class="time" id="current-time"></div>
    <div class="date" id="current-date"></div>
</div>

<!-- 汽车图标动画 -->
<div class="car-icon" style="top: 20%;"><i class="fa fa-car"></i></div>
<div class="car-icon" style="top: 40%; animation-delay: 3s;"><i class="fa fa-truck"></i></div>
<div class="car-icon" style="top: 70%; animation-delay: 7s;"><i class="fa fa-bus"></i></div>

<!-- 登录触发按钮 -->
<button class="login-trigger-btn floating" id="loginTrigger">登录系统</button>

<!-- 遮罩层 -->
<div class="overlay" id="overlay"></div>

<!-- 登录面板容器 - 初始隐藏 -->
<div class="signin-container" id="signinContainer">
    <div class="close-btn" id="closeBtn"></div>

    <div class="signin-info">
        <div class="logopanel">
            <img alt="汽车销售管理系统" src="../static/ruoyi.png" th:src="@{/ruoyi.png}" class="animated fadeIn">
        </div>

        <div class="welcome-message animated fadeInUp">
            <h4>欢迎使用 <strong>汽车销售管理系统</strong></h4>
            <p>专业汽车销售全流程解决方案</p>
        </div>

        <ul class="features-list">
            <li class="animated fadeInLeft" style="animation-delay: 0.1s;"><i class="fa fa-car"></i> 车辆采购管理</li>
            <li class="animated fadeInLeft" style="animation-delay: 0.2s;"><i class="fa fa-money"></i> 销售订单处理</li>
            <li class="animated fadeInLeft" style="animation-delay: 0.3s;"><i class="fa fa-warehouse"></i> 库存智能预警</li>
            <li class="animated fadeInLeft" style="animation-delay: 0.4s;"><i class="fa fa-line-chart"></i> 销售数据分析</li>
            <li class="animated fadeInLeft" style="animation-delay: 0.5s;"><i class="fa fa-users"></i> 客户关系管理</li>
        </ul>

        <div class="register-link animated fadeInUp" style="animation-delay: 0.6s;" th:if="${isAllowRegister}">
            <strong>还没有账号？ <a th:href="@{/register}">立即注册 &raquo;</a></strong>
        </div>
    </div>

    <div class="signin-form">
        <div class="form-header animated fadeInRight">
            <h4>用户登录</h4>
            <p>请输入您的账号和密码</p>
        </div>

        <form id="signupForm" autocomplete="off" class="animated fadeInRight">
            <div class="form-group">
                <input type="text" name="username" class="form-control uname" placeholder="用户名" value="admin" />
            </div>

            <div class="form-group">
                <input type="password" name="password" class="form-control pword" placeholder="密码" value="admin123" />
            </div>

            <div class="captcha-group" th:if="${captchaEnabled==true}">
                <div class="captcha-input">
                    <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
                </div>
                <div>
                    <a href="javascript:void(0);" title="点击更换验证码">
                        <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="captcha-image" />
                    </a>
                </div>
            </div>

            <div class="remember-me" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
                <input type="checkbox" id="rememberme" name="rememberme">
                <label for="rememberme">记住我</label>
            </div>

            <button type="submit" class="login-btn" id="btnSubmit" data-loading="正在验证登录，请稍候...">登 录</button>
        </form>

        <div class="signup-footer">
            <div>
                汽车销售进销存管理系统 &copy; 2025
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; var captchaEnabled = [[${captchaEnabled}]];</script>
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.1}"></script>
<script>
    // 更新时间显示
    function updateTime() {
        const now = new Date();
        const timeStr = now.toLocaleTimeString('zh-CN', { hour12: false });
        const dateStr = now.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            weekday: 'long'
        });

        document.getElementById('current-time').textContent = timeStr;
        document.getElementById('current-date').textContent = dateStr;
    }

    // 页面加载完成后执行
    $(document).ready(function() {
        updateTime();
        setInterval(updateTime, 1000);

        // 为验证码图片添加点击刷新效果
        $('.captcha-image').click(function() {
            var src = $(this).attr('src');
            $(this).attr('src', src.split('?')[0] + '?' + Math.random());
        });

        // 添加表单输入动画
        $('.form-control').focus(function() {
            $(this).parent().css('transform', 'translateY(-2px)');
        }).blur(function() {
            $(this).parent().css('transform', 'translateY(0)');
        });

        // 登录按钮点击事件
        $('#loginTrigger').click(function() {
            $('#overlay').addClass('show');
            $('#signinContainer').addClass('show');
        });

        // 关闭按钮点击事件
        $('#closeBtn').click(function() {
            $('#overlay').removeClass('show');
            $('#signinContainer').removeClass('show');
        });

        // 遮罩层点击事件
        $('#overlay').click(function() {
            $('#overlay').removeClass('show');
            $('#signinContainer').removeClass('show');
        });
    });
</script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
</body>
</html>